<template name="home">
	<view>
		<u-sticky>
			<view class="navtop">
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<view class="navtitle">
					商城
					<view class="icon" @click="fanhui()">
						<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
					</view>
				</view>
				<view class="search">
					<u-search placeholder="输入商品的名称" bgColor='#fff' :showAction='false' v-model="keyword"></u-search>
				</view>
			</view>
		</u-sticky>
		<view class="contentbox">
			<view class="back">
				<view class="banner">
					<u-swiper width='92vw' height='320rpx' :list="banner" @click="click"></u-swiper>
				</view>
			</view>
			<view class="liuhbai" style="height: 180rpx;">

			</view>
			<view class="content">
				<view class="inform">
					<view class="title">系统<text>公告</text></view>
					<swiper vertical autoplay circular interval="4000" display-multiple-items='1'
						style="width: 67vw;height: 3vh;">
						<swiper-item v-for="(item, index) in question" :key="index"
							style="display: flex;align-items: center;">
							<view class="text">{{ item.noticeTitle }}</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="bannerhd">
					<image src="http://222.135.140.20:9000/ob-psy/2022/12/19/bf990957c6a04135983d15321bda1329.png" mode="widthFix"></image>
					<view class="butt" @click="integral">

					</view>
				</view>
				<view class="seckillbox">
					<view class="titlebox">
						<view class="title">
							限时秒杀<text>限时销量抢好物</text>
						</view>
						<view class="more" @click="more()">
							更多<u-icon name="arrow-right" color='#999' size="10"></u-icon>
						</view>
					</view>
					<scroll-view scroll-x="true">
						<view class="commoditybox">
							<view class="commodity" v-for="(item,index) in commodity" :key="index"
								@click="detailsSeckill(item.id)">
								<image :src="item.fileName" mode="aspectFill"></image>
								<view class="cont">
									<view class="title">
										{{item.title}}
									</view>
									<view class="originalcost">
										￥{{item.otPrice}}
									</view>
									<view class="price">
										￥{{item.price}}
									</view>
									<view class="purchase">
										立即抢购
									</view>
								</view>
							</view>
						</view>
					</scroll-view>

				</view>
				<view class="recommendbox">
					<view class="title">
						<image src="../../static/recommend.png"></image>
						推荐爆款
					</view>
					<scroll-view scroll-y="true" style="height: 770rpx;">
						<view class="cont">
							<view class="recommend" v-for="(item,index) in recommend" :key="index">
								<view class="img" @click="details(item.id)">
									<image :src="item.fileName" mode="aspectFill"></image>
								</view>
								<view class="right">
									<view class="tit">
										{{item.storeName}}
									</view>
									<view class="pricebox">
										<view class="priceleft">
											<view class="price">
												<text>￥</text>
												{{item.otPrice}}
											</view>
											<view class="originalcost">
												<text>￥</text>
												{{item.price}}
											</view>
										</view>
										<view class="priceright" @click="addCars(item.id)">
											<image src="../../static/gouwu.png"></image>
										</view>
									</view>

								</view>
							</view>
						</view>
					</scroll-view>

				</view>
				<view class="Boutique">
					<view class="titlebox">
						<view class="left">
							<view class="title">
								精品推荐
							</view>
							<view class="backtit">

							</view>
						</view>
						<view class="right">
							<view class="more" @click="boutiqueRecommendation()">
								更多<u-icon name="arrow-right" color='#999' size="10"></u-icon>
							</view>
						</view>
					</view>
					<scroll-view scroll-y="true" style="height: 1100rpx;">
						<view class="cont">
							<view class="commodity" v-for="(item,index) in Boutique" :key="index"
								@click="details(item.id)">
								<view class="imag">
									<image :src="item.fileName" mode="aspectFill"></image>
								</view>
								<view class="commobott">
									<view class="tit">
										{{item.storeName}}
									</view>
									<view class="originalcost">
										<text>￥</text>
										{{item.otPrice}}
									</view>
									<view class="pricebox">
										<view class="price">
											<text>￥</text>
											{{item.price}}
										</view>
										<view class="right">
											已售{{item.sales}}
										</view>
									</view>
								</view>

							</view>
						</view>
					</scroll-view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHostList,
		getGoodList,
		getSeckillList,
		addCar
	} from '../../api/shoppingMall.js'
	import {
		getindexbanner,
		getHomeAnnouncement
	} from '../../api/index.js'
	export default {
		name: 'home',
		props: {
			cur: String,
		},
		components: {},
		data() {
			return {
				keyword: '',
				banner: [

				],
				question: [],
				commodity: [

				],
				recommend: [

				],
				Boutique: [

				]
			};
		},
		created() {
			this.commodityList();
			this.recommendList();
			this.BoutiqueList();
			//商城轮播
			getindexbanner(7).then(res => {
				if (res.rows.length > 0) {
					const data = res.rows[0].url
					this.banner = data.split(',')
				}
			})
			//商城公告
			getHomeAnnouncement(2).then(res => {
				this.question = res.rows
			})
		},
    onShow: function() {
      this.$emit("refresh")
    },
		mounted() {},
		methods: {
			// 添加购物车
			addCars(e) {
				const data = {
					productId: e,
					cartNum: 1,
					isNew: '0',
					type: '0'
				}
				addCar(data).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '添加成功！',
							icon: 'success'
						})
            this.$emit("refresh")
					}
				})
			},
			more() {
				uni.navigateTo({
					url: '../../subPackages/pages/shoppingmall/commodity/commodity'
				})
			},
			boutiqueRecommendation() {
				uni.navigateTo({
					url: '../../subPackages/pages/shoppingmall/boutiqueRecommendation/boutiqueRecommendation'
				})
			},
			detailsSeckill(id) {
				uni.navigateTo({
					url: '../../subPackages/pages/shoppingmall/productDetails/productDetailsSeckill?id=' + id
				})
			},
			details(id) {
				uni.navigateTo({
					url: '../../subPackages/pages/shoppingmall/productDetails/productDetails?id=' + id
				})
			},
			commodityList() {
				getSeckillList().then(res => {
					this.commodity = res.rows
				})
			},
			recommendList() {
				getHostList().then(res => {
					this.recommend = res.rows
				})
			},
			BoutiqueList() {
				getGoodList().then(res => {
					this.Boutique = res.rows
				})
			},
			integral() {
				console.log(111);
                  this.$emit('getjifen');
			},
			fanhui() {
				this.$emit('returns');
			}
		},
	};
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style scoped lang="scss">
	.navtop {
		background-image: linear-gradient(to right, #6CBEFF, #1989E1, #1989E1);
		overflow: hidden;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.navtitle {
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			padding: 20rpx 0;
			position: relative;

			.icon {
				position: absolute;
				left: 10rpx;
				top: 20rpx;
			}
		}

		.search {
			width: 92vw;
			margin: 20rpx auto;
		}
	}

	.contentbox {
		.back {
			height: 150rpx;
			background-image: linear-gradient(to right, #6CBEFF, #1989E1, #1989E1);
			border-radius: 0 0 50rpx 50rpx;
			position: relative;

			.banner {
				position: absolute;
				left: 4vw;
				width: 92vw;
			}
		}

		.content {
			width: 92vw;
			margin: 0 auto;

			.inform {
				margin-top: 20rpx;
				padding: 15rpx 20rpx;
				background-color: #fff;
				display: flex;
				align-items: center;

				.title {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
					padding-right: 20rpx;
					border-right: 1rpx solid #666666;
					font-size: 24rpx;
					font-weight: bold;

					text {
						display: flex;
						padding: 5rpx;
						margin-left: 5rpx;
						background-image: linear-gradient(to right, #3a99e1, #6CBEFF, #6CBEFF);
						color: #fff;
						font-size: 26rpx;
						border-radius: 10rpx;
					}
				}

				.text {
					color: #666666;
					font-size: 25rpx;
					width: 60vw;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}

			.bannerhd {
				margin: 20rpx 0;
				position: relative;

				image {
					width: 92vw;
				}

				.butt {
					position: absolute;
					right: 18vw;
					bottom: 5vw;
					width: 27vw;
					height: 8vw;
					border-radius: 50rpx;
				}
			}

			.seckillbox {
				border-radius: 15rpx;
				overflow: hidden;
				background-color: #fff;

				.titlebox {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						width: 380rpx;
						background-image: linear-gradient(to right, #FC686F, #FF934C);
						clip-path: polygon(0 0, calc(100%) 0, 0px 300px, );
						color: #fff;
						font-size: 32rpx;
						padding: 23rpx 26rpx;

						text {
							font-size: 22rpx;
							margin-left: 20rpx;
						}
					}

					.more {
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #999;
						margin-right: 20rpx;
					}
				}

				.commoditybox {
					margin: 20rpx 15rpx;
					display: inline-flex;
					justify-content: space-between;

					.commodity {
						width: 210rpx;
						margin-right: 16rpx;

						image {
							width: 210rpx;
							height: 210rpx;
						}

						.cont {
							padding: 20rpx;

							.title {
								color: #333;
								font-size: 24rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								height: 70rpx;
							}

							.originalcost {
								color: #999;
								font-size: 20rpx;
								text-decoration: line-through;
								margin: 20rpx 0 10rpx;
							}

							.price {
								color: #FF1A00;
								font-size: 32rpx;
								font-weight: bold;
							}

							.purchase {
								width: 150rpx;
								text-align: center;
								line-height: 54rpx;
								border-radius: 50rpx;
								background-image: linear-gradient(to right, #FC4D4D, #FF6769);
								color: #fff;
								font-size: 26rpx;
								margin-top: 30rpx;
							}
						}

					}
				}
			}

			.recommendbox {
				background-color: #fff;
				margin: 20rpx 0;
				padding: 20rpx;
				border-radius: 15rpx;

				.title {
					font-size: 32rpx;
					margin-top: 20rpx;
					font-weight: bold;

					image {
						width: 33rpx;
						height: 30rpx;
						margin-right: 15rpx;
					}

					margin-bottom: 30rpx;
				}

				.cont {
					.recommend {
						margin-bottom: 50rpx;
						display: flex;

						.img {
							width: 210rpx;
							height: 210rpx;
							margin-right: 22rpx;

							image {
								width: 210rpx;
								height: 210rpx;
							}
						}

						.right {
							width: 385rpx;

							.tit {
								font-size: 28rpx;
								color: #333;
								line-height: 50rpx;
								height: 100rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;

							}

							.pricebox {
								margin-top: 40rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.priceleft {
									.price {
										color: #FF1A00;
										font-size: 32rpx;
										font-weight: bold;

										text {
											font-size: 24rpx;
										}
									}

									.originalcost {
										color: #999;
										font-size: 20rpx;
										text-decoration: line-through;
									}
								}

								.priceright {
									image {
										width: 50rpx;
										height: 36rpx;
									}
								}
							}

						}
					}
				}

			}

			.Boutique {
				.titlebox {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.left {
						position: relative;
						width: 135rpx;
						height: 40rpx;

						.title {
							font-weight: bold;
							font-size: 32rpx;
						}

						.backtit {
							position: absolute;
							bottom: 0;
							left: 0;
							background-color: #1989E1;
							height: 16rpx;
							width: 130rpx;
							z-index: -1;
						}
					}

					.right {
						margin-right: 20rpx;

						.more {
							display: flex;
							color: #999;
							font-size: 20rpx;
						}

					}
				}

				.cont {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.commodity {
						width: 336rpx;
						margin-bottom: 30rpx;

						.imag {
							width: 336rpx;
							height: 336rpx;

							image {
								width: 336rpx;
								height: 336rpx;
							}
						}

						.commobott {
							padding: 20rpx;

							.tit {
								font-size: 28rpx;
								height: 80rpx;
								color: #333;
							}

							.pricebox {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.price {
									color: #FF1A00;
									font-size: 32rpx;
									font-weight: bold;

									text {
										font-size: 24rpx;
									}
								}

								.right {
									font-size: 24rpx;
									color: #999;
								}
							}

							.originalcost {
								color: #999;
								font-size: 20rpx;
								text-decoration: line-through;
								height: 25rpx;
								margin: 30rpx 0 10rpx
							}
						}

					}

				}
			}
		}
	}
</style>
